import { ref } from 'vue';

const tabQueryInfo = ref([]);
const scrollLeft = ref(0);
const parentLeft = ref(0);
const componentWidth = ref(0);
const proxy = ref();
export function useTabs({ parentId = '', tabsId = '', list = [] } = {}) {
  async function init(vm) {
    proxy.value = vm;
    // 获取tabs组件的尺寸信息
    const tabRect = await getRect(parentId, vm);
    // tabs组件距离屏幕左边的宽度
    parentLeft.value = tabRect.left;
    // tabs组件的宽度
    componentWidth.value = tabRect.width;
    await getTabRect(tabsId, list, vm);
  }
  function scrollByIndex(index) {
    // 当前活动tab的布局信息，有tab菜单的width和left(为元素左边界到父元素左边界的距离)等信息
    const tabInfo = tabQueryInfo.value[index];
    if (!tabInfo) return;
    // 活动tab的宽度
    const tabWidth = tabInfo.width;
    // 活动item的左边到tabs组件左边的距离，用item的left减去tabs的left
    const offsetLeft = tabInfo.left - parentLeft.value;
    // 将活动的tabs-item移动到屏幕正中间，实际上是对scroll-view的移动
    const sl = offsetLeft - (componentWidth.value - tabWidth) / 2;
    scrollLeft.value = sl < 0 ? 0 : sl;
  }
  return { scrollByIndex, init, scrollLeft };
}
// 获取布局
function getRect(selector, vm, all2) {
  return new Promise((resolve2) => {
    uni
      .createSelectorQuery()
      .in(vm)
      [all2 ? 'selectAll' : 'select'](selector)
      .boundingClientRect((rect) => {
        if (all2 && Array.isArray(rect) && rect.length) {
          resolve2(rect);
        }
        if (!all2 && rect) {
          resolve2(rect);
        }
      })
      .exec();
  });
}

// 查询tab的布局信息
function getTabRect(tabsId, list, vm) {
  return new Promise((resolve) => {
    // 创建节点查询
    const query = uni.createSelectorQuery().in(vm);
    // 历遍所有tab，这里是执行了查询，最终使用exec()会一次性返回查询的数组结果
    for (let i = 0; i < list.length; i++) {
      // 只要size和rect两个参数
      query.select(`${tabsId}${i}`).fields({
        size: true,
        rect: true,
      });
    }
    // 执行查询，一次性获取多个结果
    query.exec(function (res) {
      tabQueryInfo.value = res;
      resolve();
    });
  });
}
